<template>
  <div class="busView">
    <!--视图-->
    <el-row>
      <el-col :span="20" :offset="2" style="color: #333333">
        <el-row class="m-b-10">
          <el-col :offset="2" :span="4">
            <div style="line-height: 56px;font-size: 18px;width:200px">审批过程：</div>
          </el-col>
          <!--同意显示同意-->
          <el-col v-if="this.business.businessAppStatus !== 3" :span="18">
            <el-steps :active="active" finish-status="success" space="20%">
              <el-step title="待申请"></el-step>
              <el-step title="待审批"></el-step>
              <el-step title="同意"></el-step>
              <el-step title="执行"></el-step>
            </el-steps>
          </el-col>
          <!--否决显示否决-->
          <el-col v-if="this.business.businessAppStatus === 3" :span="18">
            <el-steps :active="active" finish-status="success" space="20%">
              <el-step title="待申请"></el-step>
              <el-step title="待审批"></el-step>
              <el-step title="否决"></el-step>
              <el-step title="执行"></el-step>
            </el-steps>
          </el-col>
        </el-row>
        <el-row class="m-b-10">
          <el-row v-if="this.business.businessAppStatus === 0">
            <el-col  :offset="8" :span="4" >
              <div class="opera" @click="findAllEmp(currPage,pageSize)">
                <div style="line-height: 30px;"><i class="el-icon-position"/></div>
                <span class="font-14">申请审批</span>
              </div>
            </el-col>
            <el-col  :span="4" >
              <div class="opera-no">
                <div style="line-height: 30px;"><i class="el-icon-d-arrow-left"/></div>
                <span class="font-14">撤销审批</span>
              </div>
            </el-col>
          </el-row>
          <el-row v-if="this.business.businessAppStatus === 1">
            <el-col  :offset="8" :span="4" >
              <div class="opera-no">
                <div style="line-height: 30px;"><i class="el-icon-position"/></div>
                <span class="font-14">申请审批</span>
              </div>
            </el-col>
            <el-col  :span="4" >
              <div class="opera" @click="repealApp">
                <div style="line-height: 30px;"><i class="el-icon-d-arrow-left"/></div>
                <span class="font-14">撤销审批</span>
              </div>
            </el-col>
          </el-row>
          <el-row v-if="this.business.businessAppStatus === 3">
            <el-col  :offset="8" :span="4" >
              <div class="opera" @click="findAllEmp(currPage,pageSize)">
                <div style="line-height: 30px;"><i class="el-icon-position"/></div>
                <span class="font-14">申请审批</span>
              </div>
            </el-col>
            <el-col  :span="4" >
              <div class="opera-no">
                <div style="line-height: 30px;"><i class="el-icon-d-arrow-left"/></div>
                <span class="font-14">撤销审批</span>
              </div>
            </el-col>
          </el-row>
          <!-- 员工表格dialog-->
          <el-dialog width="30%" title="申请审批" :visible.sync="innerDialog">
            <div style="margin-bottom: 20px"><span class="font-14-bold">说明：</span>以下人员拥有审批权限</div>
            <el-table :data="empList" style="width: 100%">
              <el-table-column prop="job.jobName" label="员工职位" >
              </el-table-column>
              <el-table-column prop="empName" label="员工姓名" >
              </el-table-column>
            </el-table>
            <el-row style="margin-top:10px">
              <el-col :span="16">
                <el-pagination layout="prev, pager, next, jumper" :total="totalSize" @current-change="changePage"
                               :current-page.sync="currPage" :page-size="pageSize"></el-pagination>
              </el-col>
            </el-row>
            <div style="margin-top: 20px;text-align: center">
              <el-button @click="saveApproval">申请审批</el-button>
            </div>
            <!--<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="emp in empList" :label="emp.empName" :key="emp.empName">{{emp.empName}}</el-checkbox>
            </el-checkbox-group>-->
          </el-dialog>
        </el-row>
        <el-row class="b-g-f p-10-20 border-style">
          <el-row>
            <el-col>
              <div class="dialog__header">
                <span class="dialog__title">出差</span>
              </div>
            </el-col>
          </el-row>
          <el-form ref="bus" :model="business" label-width="100px" :rules="rules">
            <el-divider></el-divider>
            <el-row>
              <el-col>
                <el-form-item label="主题:" prop="businessTheme">
                  <el-input v-model="business.businessTheme" style="width: 91%"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="开始时间:" >
                  <el-date-picker v-model="business.businessStartDate" type="date" placeholder="任意时间点" style="width: 79%">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="结束时间:">
                  <el-date-picker v-model="business.businessEndDate" type="date" placeholder="任意时间点" style="width: 79%">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col style="line-height: 40px">
                <el-form-item label="目的地:">
                  <el-input v-model="business.businessDestination" style="width: 91%"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="交通工具:">
                  <el-select v-model="business.businessVehicle" placeholder="未选" style="width: 91%">
                    <el-option v-for="item in jtOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="客户:" prop="customerByCustomerId.customerName">
                  <el-input :disabled="true" v-model="business.customerByCustomerId.customerName" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="借款:" prop="businessMoney">
                  <el-input v-model.number="business.businessMoney" style="width: 91%"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="申请人:" prop="employeeByEmpId.empName">
                  <el-input :disabled="true" v-model="business.employeeByEmpId.empName" style="width: 79%"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="状态:">
                  <el-select v-model="business.businessClassify" placeholder="未选" style="width: 79%">
                    <el-option v-for="item in ccOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="备注:">
                  <el-input v-model="business.businessRemarks"  style="width: 91%"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="审批状态:" style="width: 91%">
                  <div v-if="this.business.businessId !== 0">
                    <div v-if="this.business.businessAppStatus === 0">
                      <span>待申请</span>
                      <el-tooltip class="item" effect="dark" content="待申请" placement="bottom">
                        <i class="el-icon-more font-18"></i>
                      </el-tooltip>
                    </div>
                    <div v-if="this.business.businessAppStatus === 1">
                      <span>待审批</span>
                      <el-tooltip class="item" effect="dark" content="待审批" placement="bottom">
                        <i class="el-icon-s-opportunity font-18"></i>
                      </el-tooltip>
                    </div>
                    <div v-if="this.business.businessAppStatus === 2">
                      <span>同意</span>
                      <el-tooltip class="item" effect="dark" content="同意" placement="bottom">
                        <i class="el-icon-circle-check font-18"></i>
                      </el-tooltip>
                      <span>审批人：{{business.employeeByEmpId.empName}}</span>
                    </div>
                    <div v-if="this.business.businessAppStatus === 3">
                      <span>否决</span>
                      <el-tooltip class="item" effect="dark" content="否决" placement="bottom">
                        <i class="el-icon-circle-close font-18"></i>
                      </el-tooltip>
                      <span>审批人：{{business.employeeByEmpId.empName}}</span>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="审批记录:" style="width: 91%">
                  <el-row></el-row>
                  <el-row :key="index" v-for="(app,index) in approvalRecordList">
                    <div class="border-bo" >
                      <div class="font-13-bold">
                        <span>申请：</span>
                        <span class="margin-r-3">{{app.employeeByApplicantEmpId.empName}}<i class="el-icon-right"/> boss用户</span>
                        <span>{{app.approvalRecordDate | formatDateJudge}}</span>
                      </div>
                      <div class="font-13" v-if="app.employeeByApprovalEmpId !== null">
                        <span class="margin-r-3"><i class="el-icon-minus"/>{{app.employeeByApprovalEmpId.empName}}</span>
                        <span class="margin-r-3">{{app.approvalRecordTime | formatDate}}</span>
                        <span class="margin-r-3">{{app.approvalRecordOper}}</span>
                        <span>备注：{{app.approvalRecordNote}}</span>
                      </div>
                    </div>
                  </el-row>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" :offset="7">
                <el-form-item>
                    <span v-if="this.business.businessAppStatus !== 2">
                      <el-button @click="addBusiness" type="primary">保存</el-button>
                      <el-button @click="handleDelete" type="danger">删除</el-button>
                    </span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {formatTimeToStr} from '../assets/format.js'
  export default {
    data () {
      return {
        emp:{},
        pageSize: 5, // 分页页大小
        currPage: 1, // 当前页码，默认为1
        totalSize: 0, // 总记录数
        business: {
          businessId: 0,
          businessTheme: '',
          businessStartDate: '',
          businessEndDate: '',
          businessDestination: '',
          businessVehicle: '',
          businessMoney: '',
          businessClassify: '',
          businessRemarks: '',
          businessPeer: '',
          businessAppStatus: 0,
          customerByCustomerId:{},
          employeeByEmpId:'',
          employeeByAppEmpId:null
        },
        empList:[],// 所有Boss用户
        innerDialog: false,// bossDialog
        active: 0, //审批步骤初始值
        // 撤销审批对象
        approval:{
          approvalId:0,
          approvalTheme:'',
          approvalStay:'',
          approvalStatus: '',
          approvalClassify:'',
          approvalOperation:'',
          approvalContent:'',
          approvalDate:'',
          approvalTime:'',
          businesstripByBusinessId:'',
          employeeByApplicantEmpId:'',
          employeeByApprovalEmpId:null
        },
        approvalRecordList:[],// 审批记录集合
        // 审批记录
        approvalRecord:{
          approvalRecordId:0,
          approvalRecordTime:'',
          approvalRecordOper:'',
          approvalRecordNote:'',
          approvalRecordDate:'',
          businesstripByBusinessId:{},
          employeeByApplicantEmpId:'',
          employeeByApprovalEmpId:null
        },
        rules: {
          businessTheme: [{
            required: true,
            message: '必须填',
            trigger: 'blur'
          }],
          'customerByCustomerId.customerName': [
            { required: true, message: '请选择客户', trigger: 'blur' }
          ],
          'employeeByEmpId.empName': [
            { required: true, message: '请选择负责人', trigger: 'blur' }
          ],
          businessMoney: [
            { required: true, message: '必须填'},
            { type: 'number', message: '必须为数字'}
          ]
        },
        ccOptions: [{
          value: 1,
          label: '未出差'
        }, {
          value: 2,
          label: '出差中'
        }, {
          value: 3,
          label: '出差完成'
        }],
        jtOptions: [{
          value: 1,
          label: '高铁'
        }, {
          value: 2,
          label: '动车'
        }, {
          value: 3,
          label: '火车'
        }, {
          value: 4,
          label: '飞机'
        }, {
          value: 5,
          label: '汽车'
        }, {
          value: 6,
          label: '其他'
        }],
      }
    },
    methods: {
      // 查询当前员工
      loginEmp(){
        this.$axios.get('http://localhost:8088/emp')
          .then(v => {
            this.emp = v.data
          })
          .catch(function (v) {})
      },
      // 查询出差
      initData () {
        let businessId = this.$route.query.businessId
        this.$axios.get('http://localhost:8088/business-id',{
          params:{
            businessId: businessId
          }
        })
          .then(v => {
            this.business = v.data
            if(this.business.businessAppStatus === 0){
              this.active = 0
            }else if (this.business.businessAppStatus === 1){
              this.active = 1
            }else if (this.business.businessAppStatus === 2){
              this.active = 2
            }else if (this.business.businessAppStatus === 3){
              this.active = 2
            }
          })
          .catch(function (v) {})
      },
      // 新增、修改
      addBusiness () {
        this.$refs.bus.validate((valid) => {
          if (valid) {
            this.$axios.post('http://localhost:8088/save-business',this.business)
              .then(v => {
                this.initData()
                this.findApproval()
                this.findAppRecord()
                this.findAppRecordBy()
                this.$message({
                  message: '已保存',
                  type: 'success'
                });
              })
              .catch(function (v) {})
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // 查询出差待审批表
      findApproval(){
        let businessId = this.$route.query.businessId
        this.$axios.get('http://localhost:8088/app-bus', {
          params:{
            businessId : businessId
          }
        })
          .then(v => {
            if (v.data.length !== 0 ){
              this.approval = v.data
            }
          })
          .catch(function (v) {})
      },
      // 查询出差处于待审批状态的审批记录
      findAppRecordBy(){
        let businessId = this.$route.query.businessId
        this.$axios.get('http://localhost:8088/app-record-bus-app', {
          params:{
            businessId : businessId
          }
        })
          .then(v => {
            if (v.data.length !== 0 ){
              this.approvalRecord = v.data
            }
          })
          .catch(function (v) {})
      },
      // 查询出差单审批记录表
      findAppRecord(){
        let businessId = this.$route.query.businessId
        this.$axios.get('http://localhost:8088/app-record-bus-list', {
          params:{
            businessId : businessId
          }
        })
          .then(v => {
            this.approvalRecordList = v.data
          })
          .catch(function (v) {})
      },
      // 查询所有boss
      findAllEmp(currPage,pageSize){
        this.innerDialog = true
        this.$axios.get('http://localhost:8088/emp-boss-list',{params: {
            page: currPage,
            size: pageSize,
          }
        })
          .then(v => {
            this.empList = v.data.rows
            this.totalSize = v.data.total
          })
          .catch(function (v) {})
      },
      //boss分页
      changePage (val) {
        // val就是当前页码
        this.findAllEmp(val, this.pageSize)
      },
      // 申请审批
      saveApproval(){
        //新增审批记录表
        this.approvalRecord.employeeByApplicantEmpId = this.emp
        this.approvalRecord.approvalRecordDate = this.addDate()
        this.approvalRecord.businesstripByBusinessId = this.business
        this.saveAppRecord()
        //新增审批表 审批状态1 1待审批 2同意 3否决 4撤销
        this.approval.approvalTheme = this.business.businessTheme
        this.approval.approvalContent = '出差计划'
        this.approval.approvalStatus = 1
        this.approval.approvalDate = this.addDate()
        this.approval.approvalClassify = 1
        this.approval.employeeByApplicantEmpId = this.emp
        this.approval.businesstripByBusinessId = this.business
        this.saveApp()
        this.$message({
          message: '申请成功',
          type: 'success'
        })
        //修改出差 审批状态为待审批 0待申请 1待审批 2同意 3否决
        this.business.businessAppStatus = 1
        this.addBusiness ()
      },
      //撤销审批提示
      repealApp(){
        this.$confirm('此操作将撤销审批, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.updateApproval()
          this.$message({
            type: 'success',
            message: '撤销成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消撤销'
          })
        })
      },
      //撤销审批
      updateApproval(){
        //修改审批记录表
        this.approvalRecord.approvalRecordTime = '1'
        this.approvalRecord.approvalRecordOper = '撤销'
        this.approvalRecord.employeeByApprovalEmpId = this.emp
        this.saveAppRecord()
        //修改审批表 审批状态1 1待审批 2同意 3否决 4撤销 5重审
        this.approval.approvalStatus = 4
        this.saveApp()
        //修改报价单 审批状态为待申请  0待申请 1待审批 2同意 3否决
        this.business.businessAppStatus = 0
        this.addBusiness ()
      },
      // 审批axois
      saveApp(){
        this.$axios.post('http://localhost:8088/save-approval',
          {
            approvalId:this.approval.approvalId,
            approvalContent:this.approval.approvalContent,
            approvalTheme:this.approval.approvalTheme,
            approvalStay:this.approval.approvalStay,
            approvalStatus: this.approval.approvalStatus,
            approvalClassify:this.approval.approvalClassify,
            approvalOperation:this.approval.approvalOperation,
            approvalDate:this.approval.approvalDate,
            approvalTime:this.approval.approvalTime,
            employeeByApplicantEmpId:this.approval.employeeByApplicantEmpId,
            employeeByApprovalEmpId:this.approval.employeeByApprovalEmpId,
            businesstripByBusinessId:this.approval.businesstripByBusinessId,
          })
          .then(v => {
            this.innerDialog = false
            this.approval = {
              approvalId:0,
              approvalTheme:'',
              approvalStay:'',
              approvalStatus: 0,
              approvalClassify:0,
              approvalOperation:'',
              approvalDate:'',
              approvalTime:'',
              businesstripByBusinessId:'',
              employeeByApplicantEmpId:'',
              employeeByApprovalEmpId:null
            }
          })
          .catch(function (v) {})
      },
      // 审批记录axois
      saveAppRecord(){
        this.$axios.post('http://localhost:8088/save-app-record',
          {
            approvalRecordId:this.approvalRecord.approvalRecordId,
            approvalRecordOper:this.approvalRecord.approvalRecordOper,
            approvalRecordNote:this.approvalRecord.approvalRecordNote,
            employeeByApprovalEmpId:this.approvalRecord.employeeByApprovalEmpId,
            employeeByApplicantEmpId:this.approvalRecord.employeeByApplicantEmpId,
            approvalRecordDate:this.approvalRecord.approvalRecordDate,
            approvalRecordTime:this.approvalRecord.approvalRecordTime,
            businesstripByBusinessId: this.approvalRecord.businesstripByBusinessId
          })
          .then(v => {
            this.approvalRecord = {
              approvalRecordId:0,
              approvalRecordTime:'',
              approvalRecordOper:'',
              approvalRecordNote:'',
              employeeByApplicantEmpId:'',
              employeeByApprovalEmpId:null,
              approvalRecordDate:'',
              businesstripByBusinessId:''
            }
          })
          .catch(function (v) {})
      },
      // 删除提示
      handleDelete (val) {
        this.$confirm('此操作将永久删除该出差, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteBus(val.businessId)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      // 删除axios
      deleteBus(businessId){
        this.$axios.post('http://localhost:8088/delete-business', this.qs.stringify({businessId: businessId}))
          .then(v => {
            // 1、刷新数据
            this.$router.push('/businesstrip');
          })
          .catch(function (v) {})
      },
      // 获取当前日期
      addDate () {
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1<10? "0"+(date.getMonth() + 1):date.getMonth() + 1;
        var strDate = date.getDate()<10? "0" + date.getDate():date.getDate();
        var currentdate = date.getFullYear() + seperator1  + month  + seperator1  + strDate
        return currentdate
      }
    },
    created() {
      this.loginEmp()
      this.initData()
      this.findApproval()
      this.findAppRecord()
      this.findAppRecordBy()
    },
    filters: {
      formatDate: function(time) {
        if(time!=null&&time!="")
        {
          var date = new Date(time);
          return formatTimeToStr(date, "yyyy-MM-dd hh:mm");
        }else{
          return "";
        }
      },
      formatDateJudge: function(time) {
        if(time != null && time != "")
        {
          let date = new Date(time);
          let currentDate = new Date()
          let seperator1 = "-";
          let month = currentDate.getMonth() + 1<10? "0"+(currentDate.getMonth() + 1):currentDate.getMonth() + 1;
          let strDate = currentDate.getDate()<10? "0" + currentDate.getDate():currentDate.getDate();
          let today = currentDate.getFullYear() + seperator1  + month  + seperator1  + strDate
          let todayTime = new Date(today)
          let yesterday = todayTime.setDate(todayTime.getDate() - 1)
          let beforeYesterday = todayTime.setDate(todayTime.getDate() - 1)
          let tomorrow = todayTime.setDate(todayTime.getDate() + 3)
          let afterTomorrow = todayTime.setDate(todayTime.getDate() + 1)
          todayTime.setDate(todayTime.getDate() - 2)
          if (date.getTime() === todayTime.getTime()){
            return '今天'
          }else if (date.getTime() ===  yesterday){
            return '昨天'
          }else if (date.getTime() ===  beforeYesterday){
            return '前天'
          }else if (date.getTime() ===  tomorrow){
            return '明天'
          }else if (date.getTime() ===  afterTomorrow){
            return '后天'
          }else {
            return time
          }
        }else{
          return "";
        }
      }
    }
  }
</script>

<style scoped>

</style>
